<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">


    <title>武侯祠管理系统</title>
    
   
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

    <style type="text/css">
        .contain{
            width: 80%;
            margin-right: 9%;
            margin-left: 9%;

        }
        .myNav{
            margin-bottom: 20px;
        }
        .aColor{
            color: black;
        }
        .myModal{
            width: 90%;
            margin-left: 20px;
            margin-right: 20px;
        }
        #modal1{
            min-height: 520px;
        }
        #myTable{
            padding:20px;
        }
    </style>


   
</head>

<body class = " light-green lighten-4">
   

   

    <nav class="myNav">
      <div class="nav-wrapper light-green darken-4">
        <a href="" class="brand-logo">&nbsp武侯祠管理系统</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="">景点</a></li>
          <li><a href="">美食</a></li>
          <li><a href="">厕所</a></li>
          <li><a href="">新闻</a></li>
          <li><a href="">广播</a></li>
          <li><a href="">反馈</a></li>
          <li><a href="">设置</a></li>
        </ul>
      </div>
    </nav>

    <div class="contain  " >
        <div class="card  light-green lighten-5" id="myTable">
        <div class="row">
            <h3 class="col s10 offset-s1 center-align">武侯祠今日新闻</h3>
            <a class="waves-effect waves-teal btn-flat light-green modal-trigger" 
                style="color:white;margin-top:2.3rem;margin-left:-7%" href="#modal2">添加</a>
        </div>
        <table class="highlight responsive-table" id="tcontent">
            <thead>
                <tr>
                    <th data-field="title">标题</th>
                    <th data-field="author">作者</th>
                    <th data-field="date">日期</th>
                </tr>
            </thead>
            <tbody>
                <tr id="row1">
                    <td><a class="modal-trigger aColor" href="#modal1" id="tTitle1">热烈欢迎中央领导前来参观</a></td>
                    <td id="tName1">王大锤</td>
                    <td id="tDate1">2016-2-19</td>
                </tr>                                               
            </tbody>
        </table>
        <div class="center-align">
        <ul class="pagination">
            <li class="disabled"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
            <li class="active"><a href="#!">1</a></li>
            <li class="waves-effect"><a href="#!">2</a></li>
            <li class="waves-effect"><a href="#!">3</a></li>
            <li class="waves-effect"><a href="#!">4</a></li>
            <li class="waves-effect"><a href="#!">5</a></li>
            <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
        </ul>
        </div>
        </div>

        <div id="modal1" class="modal">
            <div class="modal-content myModal">
                <form >
                    <div class="row">
                        <div class="input-field">
                            <input value="热烈欢迎中央领导前来参观" id="mTitle1" type="text" class="validate">
                            <label for="mTitle">标题</label>
                        </div>
                        <div class="input-field">
                            <input value="小王" id="mAuthor1" type="text" class="validate">
                            <label for="mAuthor">作者</label>
                        </div>  
                        <div>
                            <label for="mDate">发表日期</label>
                            <input type="date" class="datepicker validate" id="mDate1">
                        </div>                     
                        <div class="input-field">
                            <textarea id="mContent1" class="materialize-textarea"></textarea>
                            <label for="mContent">内容</label>
                        </div> 
                    </div>
                </form>
            </div>
            <div class="modal-footer">                
                <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat">取消</a>
                <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat" onclick="tdelete()">删除</a>
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" onclick="save()">保存</a>
            </div>
        </div>
        <!--添加-->
        <div id="modal2" class="modal">
            <div class="modal-content myModal">
                <form >
                    <div class="row">
                        <div class="input-field">
                            <input value="热烈欢迎中央领导前来参观" id="mTitle" type="text" class="validate">
                            <label for="mTitle">标题</label>
                        </div>
                        <div class="input-field">
                            <input value="小王" id="mAuthor" type="text" class="validate">
                            <label for="mAuthor">作者</label>
                        </div>  
                        <div>
                            <label for="mDate">发表日期</label>
                            <input type="date" class="datepicker validate" id="mDate">
                        </div>                     
                        <div class="input-field">
                            <textarea id="mContent" class="materialize-textarea"></textarea>
                            <label for="mContent">内容</label>
                        </div> 
                    </div>
                </form>
            </div>
            <div class="modal-footer">                
                <a href="#!" class="modal-action modal-close waves-effect waves-red btn-flat" onclick="tdelete()">取消</a>
                <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat" onclick="add()">保存</a>
            </div>
        </div>
    </div>



<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
    $(document).ready(function(){
        // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
        $('.modal-trigger').leanModal();
        var settings = {
            type: "POST",
            url: "http://192.168.21.16:8000/info/get_news_list",
            dataType: "json",
            data:{
                device_id:123456,
                start:0,
                num:10
            },
            success: function(data,textStatus) {
                alert("success");
                for(int i =0; i<10; i++){
                    //复制append函数,num为新闻id,注意修改$('#myTable').append("<div id='modal3' class='modal'>"中的3，改为num
                }
            },
            error: function(XHR, textStatus, errorThrown) {
                alert("网络错误" + XHR);
            },
        };
        $.ajax(settings);
    });

        

    });
    $('.datepicker').pickadate({
        selectMonths: true, // Creates a dropdown to control month
        selectYears: 15 // Creates a dropdown of 15 years to control year
    });
    function add(){
        var message = '{"status":100,"message":"add news"}';  
        var m = JSON.parse(message);  
        var status = m.status;  

        var title = $('#mTitle').val();
        var name = $('#mAuthor').val();
        var date = $('#mDate').val();
        var num = 3;

        $('#tcontent').append("<tr><td><a class='modal-trigger aColor' href='#modal"+num+"'>"
            +title+"</a></td><td>"+name+"</td><td>"+date+"</td></tr>");

        $('#myTable').append("<div id='modal3' class='modal'>"+
            "<div class='modal-content myModal'>"+
            "<form><div class='row'>"+
            "<div class='input-field'>"+
            "<input value="+title+" id='mTitle"+num+"' type='text' class='validate'></div>"+
            "<div class='input-field'>"+
            "<input value="+name+" id='mAuthor"+num+"' type='text' class='validate'></div>"+
            "<div><input type='date' class='datepicker validate' id='mDate"+num+"'></div>"+
            "<div class='input-field'>"+
            "<textarea id='mContent"+num+"' class='materialize-textarea'></textarea>"+
            "<label for='mContent"+num+"'>内容</label>"+
            "</div></form>"+
            "<div class='modal-footer'>"+
            "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>取消</a>"+
            "<a href='#!' class='modal-action modal-close waves-effect waves-red btn-flat'>删除</a>"+
            "<a href='#!' class='modal-action modal-close waves-effect waves-green btn-flat'>保存</a>"+
            "</div></div></div>"
            );

        $('.modal-trigger').leanModal();
        $('.datepicker').pickadate({
          selectMonths: true, // Creates a dropdown to control month
          selectYears: 15 // Creates a dropdown of 15 years to control year
        });


        $.post({
            url:"/admin/post_news",
            data:{date:"2016-2-21",title:".....",author:"sjy",content:"i'm hungry"},
            function(msg){
                if(status==100){

                }
                else{
                    alert("请求错误！请重试");
                }
            },
            type:"json"
        });
    }

    function tdelete(){
        console.log("delete");
        $('#row1').remove();

    }

    function save(){
        var num = 1;
        var title = $('#mTitle'+num).val();
        var name = $('#mAuthor'+num).val();
        var date = $('#mDate'+num).val();  
        console.log(title);
        console.log(name);
        console.log(date);
        $('#tName'+num).text(name);
        $('#tTitle'+num).text(title);
        $('#tDate'+num).text(date);            
    }

</script>

</body>
</html>